<template>
    <div class="layout">
        <dy-header></dy-header>
        <div id="main" :class="[{'have-footer': showFooter}, {'have-select' : headerData.type == 'router' || headerData.path == '/loans/cockpit'}]">            
            <div v-if="update && !showFooter && !this.$route.path.match('/collect/index')" class="up-time">截止时间：{{update}} {{this.$route.path.match('/loans/actual') ? '(每半小时更新)' : ''}}</div>
            <router-view/>
            <div :class="[{'hide' : isLoader}, 'loader']">
                <div class="loader-inner ball-pulse">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div :class="[{'hide' : isLoader}, 'loader-mask']"></div>            
        </div>
        <dy-footer v-if="showFooter"></dy-footer>
    </div>
</template>
<script>
export default {
    name: 'layout',
    data() {
        return {}
    },
    computed: {
        update () {
            return this.$store.getters.update || '';
        },
        showFooter(){
            return this.$route.path.match('/loans/cockpit')
        },
        headerData () {
            return this.$store.getters.headerData
        },
        isLoader () {
            return this.$store.getters.isLoader
        }

    },    
    mounted () {
        let $loader = document.querySelectorAll('.initLoader')
        if($loader.length) {
            document.body.removeChild($loader[0])
            document.body.removeChild($loader[1])
        }
    }
}
</script>
<style lang="less" scope>
@import '../assets/less/base.less';
.have-footer {
    margin-bottom: 5rem;
}
</style>
